<template>
	<view style="min-height: 100vh;"
		:style="{background:'url('+Imgbase+'/1zhan_new_sbgc.jpg)','background-size':'100%',}">
		<cu-custom bgColor="bg-newblue" :isBack="true">
			<block slot="content">
				<text>兑换</text>
			</block>
		</cu-custom>

		<view class="one">
			<view class="left w-60 h-60" @click="swiper_left">
				<image :src="Imgbase + '/1zhan_ex_left.png'" mode="aspectFit"></image>
			</view>
			<view class="center"
				:style="{background:'url('+Imgbase+'/1zhan_ex_vipkuang1.png)','background-size':'100% 100%',}">
				<view class="swiper1">
					<!-- <u-swiper imgMode="aspectFill" :list="swiper_list" :current="swiper_index" height="100%" bgColor=""
						radius="105" nextMargin="-1" :autoplay="false" @change="swipercha"></u-swiper> -->
					<swiper class="" style="width: 100%;height: 100%;" :current="swiper_index" @change="swipercha">
						<swiper-item style="border-radius: 50%;overflow: hidden;" v-for="(item, index) in swiper_list"
							:key="index">
							<view class="swiper-item">
								<image :src="item.url" mode="aspectFill"></image> 123123
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="vip" v-if="level > 0">
					<view class="one">
						V
					</view>
					<view class="two">
						I
					</view>
					<view class="three">
						P
					</view>
					<view class="four">
						{{level}}
					</view>
				</view>
			</view>
			<view class="w-60 h-60" @click="swiper_right">
				<image :src="Imgbase + '/1zhan_ex_right.png'" mode="aspectFit"></image>
			</view>

			<view class="xing1">
				<image :src="Imgbase + '/1zhan_ex_img2.png'" mode="aspectFit"></image>
			</view>

			<view class="xing2">
				<image :src="Imgbase + '/1zhan_ex_img3.png'" mode="aspectFit"></image>
			</view>
			<view class="exrule" @click="showrule">
				<image :src="Imgbase + '/1zhan_ex_rule.png'" mode="aspectFit"></image>
			</view>

			<view class="shengyu">
				剩余
				<view class="">
					{{count}}
				</view>
				个
			</view>

			<view class="zuida">
				今日可兑换
				<view class="">
					{{zuida}}
				</view>
				个
			</view>
		</view>

		<view class="shoptitle"
			:style="{background:'url('+Imgbase+'/1zhan_ex_name.png)','background-size':'100% 100%',}">
			{{name}}
		</view>

		<view class="scoll">
			<view class="scoll_left"
				:style="{background:'url('+Imgbase+'/1zhan_ex_centerbgc.png)','background-size':'100% 100%',}">
				<scroll-view scroll-x class="nav" style="width: 88%;" scroll-with-animation :scroll-left="scrollLeft"
					:scroll-into-view="scroll_index">
					<view v-for="(item,index) in swiper_list" :key="index" class="choose" @click="tabSelect(index)"
						style="" :class="index==swiper_index?'sw_chooses':'sw_nochooses'">
						<image :src="item.url" mode="aspectFit"></image>
						<!-- <view class="sanjiao" style="">
								<image v-if="index==swiper_index" :src="Imgbase + '/1zhan_ex_sanjiao.png'"
									style="height: 45rpx;width: 70rpx;" mode="aspectFit"></image>
							</view> -->
					</view>
				</scroll-view>
			</view>
			<view class="scoll_right" @click="allshopshow = true">
				<view class="">
					<image :src="Imgbase + '/1zhan_ex_all.png'" style="height: 95rpx;width: 50rpx;" mode="widthFix">
					</image>
				</view>
				<view class="num">
					({{swiper_list.length}})
				</view>
			</view>
		</view>

		<view class="shoplist">
			<view class="text">
				<view class="">
					进阶进度
				</view>
				<view class="">
					<text class="margin-right-30 colo"
						v-if="premoney/shopmoney*100 > 0">+{{Number(premoney/shopmoney*100).toFixed(2)}}%</text>
					{{Number(mymoney/shopmoney*100).toFixed(2)}}%
				</view>
			</view>
			<view class="rate">
				<view class="rate_one" :style="[{ width:mymoney/shopmoney*100 + '%'}]">

				</view>

				<view class="rate_two " :style="[{width:premoney/shopmoney*100 + '%'}]">

				</view>
			</view>

			<view class="backpacks">
				<view class="adds margin-bottom-15" @click="goadds">
					<u-icon name="plus" color="#cfcfcf" size="36"></u-icon>
				</view>
				<view class="backshop" v-for="(item,idx) in backlist" :key="idx">
					<view class="quxiao" @click="deleback(idx)">
						<image class="w-30 h-30 " :src="Imgbase + '/1zhan_ex_quxiao.png'" mode="widthFix"></image>
					</view>
					<view class="shuliang">
						{{item.num}}
					</view>
					<image class="w-150 h-150 img" :src="item.adimage" mode="widthFix"></image>
				</view>
			</view>
			<view class="w100" style="">
				<image class="w100 h-110" :src="Imgbase + '/1zhan_ex_img4.png'" mode="aspectFill"></image>
			</view>
		</view>

		<view class="bottombtn">
			<view class="btn" @click="goindex" v-if="backlist.length == 0 && mymoney/shopmoney*100 < 100">
				<image class="w-670 h-100 " :src="Imgbase + '/1zhan_ex_btn1s.png'" mode="aspectFit"></image>
			</view>
			<view class="btn" @click="jike" v-if="backlist.length > 0 && mymoney/shopmoney*100 < 100">
				<image class="w-670 h-100 " :src="Imgbase + '/1zhan_ex_btn2s.png'" mode="aspectFit"></image>
			</view>
			<view class="btn" @click="liji" v-if="mymoney/shopmoney*100 >= 100">
				<image class="w-670 h-100 " :src="Imgbase + '/1zhan_ex_btn3s.png'" mode="aspectFit"></image>
			</view>
		</view>

		<!-- 查看全部 -->
		<u-popup :show="allshopshow" @close="close" @open="open" :round="10" closeable>
			<view class="popupall">
				<view class="title">
					<image class="w-300 h-100 " :src="Imgbase + '/1zhan_ex_allshop.png'" mode="aspectFit"></image>
				</view>
				<scroll-view class="shops padding-bottom-80" scroll-y style="" @scrolltolower="allshoppage">
					<view class="item" v-for="(item,index) in allshoplist" :key="index" @click="shouji(index)">
						<view class="img h-340">
							<image :src="item.adimage" mode="widthFix"></image>
						</view>
						<view class="name one-line w100">
							{{item.name}}
						</view>
						<view class="flex-between padding-top-15">
							<view class="tage ">
								<!-- toFixed(mymoney,item.price)*100% -->
								{{Number(mymoney/item.price*100).toFixed(2)}}%
							</view>
							<view class="w-140  margin-right-15" @click="shouji(index)">
								<image class="w-140 h-55" :src="Imgbase + '/1zhan_ex_shouji.png'" mode="aspectFit">
								</image>
							</view>
						</view>
					</view>
				</scroll-view>

			</view>
		</u-popup>

		<!-- 选择地址 -->
		<view class="">
			<u-popup :show="show" @close="close" @open="open" :safeAreaInsetBottom="false" :round="30">
				<view class="goumai" :class="textshow == 1?'goumai1':'goumai2'">
					<view class="title">
						提示
						<view class="close" @click="closeshow">
							<u-icon name="close" size="24"></u-icon>
						</view>
					</view>

					<view class="text" v-if="textshow == 1">
						<view class="">
							注意: 该物品将直接发货到
						</view>
						<view class="" style="display: flex;justify-content: space-between;">
							<view class="">
								<text style="font-weight: bold;color: #F97903;">{{address}}</text>
							</view>
							<view class="" style="color: #0375EE;min-width: 180rpx;text-align: right;"
								v-if="textshow == 1" @click="addressshow = true">
								修改地址
							</view>
						</view>
						<view class="">
							是否兑换?
						</view>
					</view>

					<view class="text" style="padding-top: 30rpx;text-align: center;" v-if="textshow == 2">
						是否将物品兑换至背包?
					</view>


					<view class="btn">
						<u-button text="确定" customStyle="height:90rpx;" @click="addressbtn" color="#F97903">
						</u-button>
					</view>

				</view>

			</u-popup>
		</view>

		<view class="">
			<u-popup :show="addressshow" mode="right">
				<view class="add">
					<view class="title">
						收货地址
						<view class="close" @click="addressshow = false">
							<u-icon name="close" size="24"></u-icon>
						</view>
					</view>
					<view class="ress">
						<scroll-view scroll-y="true" show-scrollbar="true" style="height: 1050rpx;">
							<radio-group style="width: 100%;">
								<view class="ress_item" v-for="(item, index) in addresslist" :key="index">
									<view class="icon">
										{{item.name[0]}}
									</view>
									<view class="infors">
										<view class="top">
											<view class="name one_worp">{{item.name}}</view>
											<text class="phone">{{item.phone}}</text>
											<text v-if="item.selected == 1" class="moren">默认</text>
										</view>
										<view class="bot two_worp">
											{{item.detail}}
											<view class="" @click="radioCheck(index)">
												<radio :value="item.id" :checked="item.id==radioValue">
												</radio>
											</view>
										</view>
									</view>

								</view>
							</radio-group>
						</scroll-view>
					</view>
					<view class="adds">
						<view class="btn">
							<u-button text="+ 添加收获地址" customStyle="height:90rpx;" @click="opens" color="#F99833">
							</u-button>
						</view>
					</view>
					<view class="btn" v-if="addresslist.length !== 0" style="margin-top: 50rpx;" @click="zuique">
						<u-button text="确定" customStyle="height:90rpx;" color="#F66055">
						</u-button>
					</view>
				</view>
			</u-popup>
		</view>

		<view class="cu-modal" style="z-index: 99999;" :class="modalName=='Modal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" style="background-color:initial;margin-top: 100rpx;"
				:style="{background:'url('+Imgbase+'/gooddetail_alarm_bg5.png) no-repeat','background-size':'100% 100%'}">
				<scroll-view class="scroll text-left" scroll-y="true" v-html='explain.content'
					style="max-height: 70vh; padding: 100rpx;">
				</scroll-view>
				<view style="width: 100%;height: 200upx;"></view>
			</view>
		</view>

		<!-- 添加地址 -->
		<view class="">
			<u-popup :show="tinajiashow" @close="tinajiashow = false" :safeAreaInsetBottom="false" :round="30">
				<view class="addto">
					<view class="close" @click="tinajiashow = false">
						<u-icon name="close" size="26"></u-icon>
					</view>
					<view class="" style="height: 80rpx;">

					</view>
					<view class="item" v-for="(item,index) in itemlist" :key="index">
						<view class="left">
							{{item.text}}
						</view>

						<view class="right">
							<input style="background-color: #fff;width: 95%;" :placeholder="item.prs"
								v-model="item.data" type="text">
						</view>
					</view>

					<view class="items">
						<view class="left">
							设置为默认收货地址
						</view>

						<view class="right">
							<u-switch v-model="ssvalue" @change="changes"></u-switch>
						</view>
					</view>
					<view class="btn" style="">
						<u-button text="保存" customStyle="height:90rpx;" @click="addresson" color="#F99833">
						</u-button>
					</view>
				</view>
			</u-popup>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<!-- gooddetail_alarm_bgs -->
<script>
	export default {
		data() {
			return {
				Imgbase: getApp().globalData.Imgbase,
				swiper_list: [],
				swiper_index: 0,
				scroll_index: '',
				scrollLeft: 0,
				list: [],
				allshopshow: false,
				mymoney: 0,
				shopmoney: 0,
				backlist: [],
				backid: [],
				id: 0,
				page: 1,
				allshoplist: [],
				premoney: 0,
				level: 0,
				name: '',
				shengyu: '',
				count: 0,
				zuida: 0,
				content: '',
				queshow: false,
				address: [],
				modalName: null,
				explain: '',
				show: false,
				famtext: '',
				detail: '',
				addressshow: false,
				addresslist: [],
				addressitem: [],
				textshow: 0,
				tinajiashow: false,
				itemlist: [{
						text: '收货人',
						prs: '名字',
						data: ''
					},
					{
						text: '手机号码',
						prs: '手机号',
						data: ''
					},
					{
						text: '详细地址',
						prs: '省、市、区、街道',
						data: ''
					},
				],
				ssvalue: 0,
				addressindex: 0
			};
		},
		onLoad() {
			this.exchangelist()
		},
		onShow() {
			this.exchangelists()
			this.prepare()
			this.addressList()
			this.addressLists()
			let _this = this

			uni.$on('updateData', function(data) {
				_this.backlist = []
				this.$nextTick(() => {
					console.log(data)
					_this.backlist = data
				})
			})
		},
		methods: {
			zuique() {
				this.addressshow = false
				let index = this.addressindex
				this.address_id = this.addresslist[index].id
				this.detail = this.addresslist[index].detail;
				this.address = this.addresslist[index].detail;
				this.addresslist.forEach((item => {
					item.isCheck = false
				}))
				if (this.radioValue == this.addresslist[index].id) {
					this.radioValue = null
				} else {
					this.radioValue = this.addresslist[index].id
				}
				this.addressitem = this.addresslist[index]
			},
			changes(e) {
				if (e) {
					this.selected = 1
				} else {
					this.selected = 0
				}
			},
			// 保存收货地址
			addresson() {
				let _this = this

				if (_this.itemlist[0].data == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写收货人姓名'
					});
					return
				}
				if (_this.itemlist[1].data.length != 11) {
					uni.showToast({
						icon: 'none',
						title: '请填写正确的手机号码'
					});
					return
				}
				if (_this.itemlist[2].data == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写详细地址'
					});
					return
				}
				this.tinajiashow = false

				uni.request({
					url: _this.$globals.apibase + '/api/Luckorder/operaAddress',
					data: {
						token: uni.getStorageSync('token'),
						name: _this.itemlist[0].data,
						phone: _this.itemlist[1].data,
						detail: _this.itemlist[2].data,
						selected: _this.ssvalue,
						id: '',
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.data.code == '1') {
							_this.addressLists()
							_this.show = false
							uni.showToast({
								icon: 'none',
								title: '添加成功'
							});
						}
						_this.itemlist.forEach(function(item, index) {
							item.data = ''
						})
						_this.selected = 0
						_this.value = false
					}
				});
			},
			opens() {
				this.tinajiashow = true
				// this.id = ''
				// this.itemlist.forEach(function(item, index) {
				// 	item.data = ''
				// })
				// this.selected = 0
				// this.value = false
				// console.log('open');
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			// 选择地址
			radioCheck(index) {
				this.addressindex = index
			},
			// 获取地址列表
			addressLists() {
				let _this = this;
				uni.request({
					url: _this.$globals.apibase + '/api/Luckorder/addressList',
					data: {
						token: uni.getStorageSync('token'),
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						_this.detail = res.data.data.list[0].detail;
						_this.address_id = res.data.data.list[0].id;
						_this.addresslist = res.data.data.list;
						_this.radioValue = res.data.data.list[0].id;
						// for (let i = 0; i < res.data.data.list.length; i++) {
						// 	_this.addresslist = _this.addresslist.concat(res.data.data.list[i])
						// }
						// if (_this.address == null) {
						// 	_this.address = res.data.data.list2[0]
						// 	_this.address_id = res.data.data.list2[0].id
						// }
					}
				});
			},
			// 选择地址
			addressbtn() {
				this.exchangeGoods()
				this.show = false
			},
			closeshow() {
				this.show = false
			},
			hideModal(e) {
				this.modalName = null
			},
			showrule() {
				let _this = this;
				uni.request({
					url: _this.$globals.apibase + '/api/Index/explain',
					data: {
						id: 14
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						_this.explain = res.data.data.desc;
						_this.modalName = 'Modal'
					}
				});
			},
			goindex() {
				uni.redirectTo({
					url: '/pages/index/index'
				})
				// uni.nav
			},
			// 百分比
			prepare() {
				let _this = this
				_this.premoney = 0
				this.backlist.forEach(function(e) {
					_this.premoney += e.money * e.num
				})

			},
			shouji(e) {
				this.allshopshow = false
				this.swiper_index = e
				this.scrollLeft = (e - 1) * 80;
				console.log(this.swiper_list)
				this.shopmoney = this.swiper_list[e].money
				this.id = this.swiper_list[e].ids
			},
			allshoppage() {
				this.page++
				this.exchangelists()
			},
			// 即刻进阶
			jike() {
				let _this = this
				console.log(this.backlist)
				let sss = []
				this.backlist.forEach(function(e, i) {
					sss.push({
						'goods_id': e.goods_id,
						"num": e.num,
					})
					// sss.push({goods_id})
					// _this.backid.push({"id":e.id})
					// e.ids.forEach((add) => {
					// 	_this.backid += add + ','
					// })
				})
				this.backid = this.backid.slice(0, -1);

				this.exchangePrice(JSON.stringify(sss))
			},
			cancel() {
				this.queshow = false
			},
			// 立即进阶
			liji() {
				// textshow
				if (this.swiper_list[this.swiper_index].is_send == 1) {
					this.textshow = 1
				} else {
					this.textshow = 2
				}

				console.log(this.swiper_list[this.swiper_index])
				this.famtext = ''
				this.show = true

			},
			async addressList() {
				let item = await this.$api.post('Luckorder/addressList', {
					token: uni.getStorageSync('token'),
				})
				this.address = item.data.list[0].detail
				this.addressitem = item.data.list[0]

			},
			// 即可进阶 -- 进度条
			async exchangePrice(sss) {
				let item = await this.$api.post('exchange/exchangePrice', {
					token: uni.getStorageSync('token'),
					ids: sss
				})
				if (item.code == 1) {
					uni.showToast({
						icon: 'none',
						title: '进阶成功'
					});
					this.exchangelist()
					this.prepare()
					this.backlist = []
					this.premoney = 0
				}
			},
			// 立即兑换
			async exchangeGoods() {
				let _this = this
				let item = await this.$api.post('exchange/exchangeGoods', {
					token: uni.getStorageSync('token'),
					id: _this.id,
					num: 1,
					name: this.addressitem.name,
					phone: this.addressitem.phone,
					detail: this.addressitem.detail,
				})
				if (item.code == 1) {
					uni.showToast({
						icon: 'none',
						title: '兑换成功'
					});
					this.exchangelist()
					this.prepare()
				}
			},
			async exchangelists() {
				let _this = this
				let item = await this.$api.post('exchange/exchangelist', {
					token: uni.getStorageSync('token'),
					limit: 30,
					page: _this.page
				})
				// this.allshoplist = item.data.list
				for (let i = 0; i < item.data.list.length; i++) {
					_this.allshoplist = _this.allshoplist.concat(item.data.list[i])
				}
			},
			// 删除背包物品
			deleback(idx) {
				let _this = this
				this.backlist.splice(idx, 1)
				_this.premoney = 0
				this.backlist.forEach(function(e) {
					_this.premoney += Number(e.money)
				})

			},
			// 兑换列表
			async exchangelist() {
				let _this = this
				let item = await this.$api.post('exchange/exchangelist', {
					token: uni.getStorageSync('token'),
					type: 0,
					page: 1,
					limit: 10000
				})
				this.mymoney = item.data.jindu
				this.swiper_list = item.data.list
				let arr = [];
				item.data.list.forEach(function(e, i) {
					// sss = _this.list.push('ss':'12')
					arr.push({
						'url': e.adimage,
						"id": 't' + (e.id + 1),
						"money": e.price,
						"ids": e.id,
						"level": e.level,
						"name": e.name,
						"count": e.count,
						"zuida": e.max_limit,
						"is_send": e.is_send
					})
				})
				this.swiper_list = arr
				this.shopmoney = this.swiper_list[this.swiper_index].money
				this.level = this.swiper_list[this.swiper_index].level
				this.name = this.swiper_list[this.swiper_index].name
				this.count = this.swiper_list[this.swiper_index].count
				this.zuida = this.swiper_list[this.swiper_index].zuida
				this.id = item.data.list[this.swiper_index].id
			},

			open() {
				// console.log('open');
			},
			close() {
				this.allshopshow = false
				// console.log('close');
			},
			// 点击scorll
			tabSelect(e) {
				this.swiper_index = e
				this.scrollLeft = (e - 1) * 80;
				this.shopmoney = this.swiper_list[e].money
				this.level = this.swiper_list[e].level
				this.id = this.swiper_list[e].ids
				this.name = this.swiper_list[e].name
				this.count = this.swiper_list[e].count
				this.zuida = this.swiper_list[e].zuida
			},
			// 轮播 左
			swiper_left() {
				let ix = this.swiper_index
				if (this.swiper_index != 0) {
					this.swiper_index--
				}
				this.shopmoney = this.swiper_list[ix].money
				this.level = this.swiper_list[ix].level
				this.name = this.swiper_list[ix].name
				this.count = this.swiper_list[ix].count
				this.zuida = this.swiper_list[ix].zuida
			},
			// 轮播 右
			swiper_right() {
				let ix = this.swiper_index
				if (this.swiper_index < (this.swiper_list.length - 1)) {
					this.swiper_index++
				}
				this.shopmoney = this.swiper_list[ix].money
				this.level = this.swiper_list[ix].level
				this.name = this.swiper_list[ix].name
				this.count = this.swiper_list[ix].count
				this.zuida = this.swiper_list[ix].zuida
			},
			swipercha(e) {
				this.swiper_index = e.detail.current
				this.shopmoney = this.swiper_list[e.detail.current].money
				this.level = this.swiper_list[e.detail.current].level
				this.name = this.swiper_list[e.detail.current].name
				this.count = this.swiper_list[e.detail.current].count
				this.zuida = this.swiper_list[e.detail.current].zuida
				// console.log(e.current)
				// this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.scrollLeft = (e.detail.current - 1) * 90;
			},
			goadds() {
				// mymoney allshoplist
				let mon = this.allshoplist[this.swiper_index].price - this.mymoney
				uni.navigateTo({
					url: '/pages/index/addshop?data=' + JSON.stringify(this.backlist) + '&money=' + mon
				})
			}


		},
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.addto {
		height: 680rpx;
		background-color: #f4f4f4;
		border-radius: 50rpx;

		.btn {
			width: 90%;
			margin: 20rpx auto 0;
			border-radius: 50rpx;
			overflow: hidden;
		}

		.items {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 30rpx 0;
			margin-bottom: 50rpx;

			.left {
				font-size: 34rpx;
				font-weight: bold;
			}

			.right {
				padding-right: 20rpx;
			}
		}

		.close {
			float: right;
			padding-top: 30rpx;
			padding-right: 35rpx;
		}

		.item {
			display: flex;
			padding: 30rpx;

			.left {
				width: 150rpx;
				font-size: 34rpx;
				font-weight: bold;
				padding-top: 10rpx;
				margin-right: 30rpx;
			}

			.right {
				width: 500rpx;
				background-color: #fff;
				padding: 15rpx;
				border-radius: 25rpx;

			}
		}
	}

	.shoptitle {
		width: 90%;
		height: 70rpx;
		margin: 20rpx auto 0;
		text-align: center;
		line-height: 70rpx;
		font-weight: bold;
		color: #F68C50;
	}

	.bottombtn {
		width: 100%;
		z-index: 9999;

		.btn {
			width: 100%;
			text-align: center;
		}
	}

	.shoplist {
		background-color: #FFFCE1;
		width: 95%;
		margin: -6rpx auto 10rpx;
		border-radius: 20rpx;
		padding: 20rpx 0;
		border: 2rpx solid #71B16E;
		overflow: hidden;

		.colo {
			color: #08dab7;
		}

		.text {
			display: flex;
			justify-content: space-between;
			padding: 0 40rpx;
			color: #40843F;
			font-weight: bold;
		}

		.rate {
			width: 90%;
			margin: 10rpx auto 50rpx;
			height: 40rpx;
			background-color: #C7FCF4;
			border-radius: 20rpx;
			display: flex;
			overflow: hidden;

			.rate_one {
				background-color: #08dab7;
				height: 100%;
				transition: .5s;
				flex-shrink: 0
			}

			.rate_two {
				height: 100%;
				background-color: #e5ff39;
				transition: .5s;
			}
		}

		.backpacks {
			padding-left: 40rpx;
			overflow: hidden;

			.adds {
				width: 150rpx;
				height: 150rpx;
				border: 4rpx solid #cfcfcf;
				border-radius: 15rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				float: left;
				margin-right: 10rpx;

			}

			.backshop {
				width: 150rpx;
				height: 150rpx;
				float: left;
				border: 2rpx solid #FC9A34;
				border-radius: 15rpx;
				margin-right: 10rpx;
				margin-bottom: 15rpx;
				// padding: 2rpx;
				position: relative;

				.quxiao {
					position: absolute;
					top: -10rpx;
					left: -10rpx;
					z-index: 999;
				}

				.shuliang {
					position: absolute;
					top: -1rpx;
					right: 0rpx;
					z-index: 999;
					padding: 5rpx 12rpx;
					color: #fff;
					background-color: #FDBD72;
					// width: 40rpx;
					text-align: center;
					border-radius: 10rpx;
				}

				.img {
					border-radius: 15rpx;
				}
			}
		}
	}

	.one {
		display: flex;
		align-items: center;
		overflow: hidden;
		position: relative;

		.xing1 {
			position: absolute;
			left: 10rpx;
			top: 100rpx;
			width: 120rpx;
			height: 120rpx;
			z-index: 9999;

		}

		.xing2 {
			position: absolute;
			right: -30rpx;
			bottom: 70rpx;
			width: 120rpx;
			height: 120rpx;
			z-index: 9999;
		}

		.exrule {
			position: absolute;
			width: 100rpx;
			height: 50rpx;
			right: 0;
			top: 40rpx;
		}

		.shengyu {
			position: absolute;
			bottom: 0;
			left: 70rpx;
			width: 70rpx;
			height: 180rpx;
			padding: 20rpx 10rpx 0;
			text-align: center;
			font-weight: bold;
			word-wrap: break-word;
			border: 4rpx solid #FF9B32;
			background-color: #FFFCE1;
			border-radius: 15rpx;
		}

		.zuida {
			position: absolute;
			bottom: 0;
			right: 70rpx;
			width: 70rpx;
			height: 240rpx;
			padding: 20rpx 10rpx 0;
			text-align: center;
			font-weight: bold;
			word-wrap: break-word;
			border: 4rpx solid #FF9B32;
			background-color: #FFFCE1;
			border-radius: 15rpx;
			font-size: 24rpx;
		}

		image {
			width: 100%;
			height: 100%;
		}

		.left {}

		.center {
			width: 500rpx;
			height: 500rpx;
			margin: 0 auto 0;
			padding: 5rpx;
			position: relative;

			.vip {
				position: absolute;
				width: 25%;
				top: 2rpx;
				left: 37.5%;
				padding: 5rpx 8rpx 5rpx;
				z-index: 999;
				color: #F97903;
				text-align: center;
				font-size: 34rpx;
				font-weight: bold;
				display: flex;
				justify-content: center;


				.one {
					padding-top: 2rpx;
					padding-right: 8rpx;
					transform: rotate(0.95turn);
				}

				.two {
					padding-right: 8rpx;
					transform: rotate(0.99turn);
				}

				.three {
					padding-right: 5rpx;
					transform: rotate(0.01turn);
				}

				.four {
					padding-top: 4rpx;
					transform: rotate(0.02turn);
				}

			}

			.swiper1 {
				width: 85%;
				height: 85%;
				margin: 38rpx auto;
				border-radius: 50%;
				overflow: hidden;
				padding-left: 3rpx;
				position: relative;
				z-index: 1;

				.swiper-item {
					width: 100%;
					height: 100%;
					overflow: hidden;
				}
			}
		}
	}

	.popupall {
		height: 1300rpx;
		padding: 30rpx 30rpx 110rpx;
		background-color: #FFFCE1;
		border-radius: 45rpx;

		.title {
			width: 100%;
			text-align: center;
		}

		.shops {
			padding-top: 30rpx;
			height: 1200rpx;

			.item {
				width: 335rpx;
				height: 450rpx;
				border: 2rpx solid #74B773;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				float: left;
				border-radius: 25rpx;
				overflow: hidden;
				font-weight: bold;


				.name {
					padding: 0 10rpx;
					color: #3B2610;
				}

				.bot {
					// display: ;
				}

				.tage {
					padding-left: 10rpx;
					color: #FC9A34;
				}
			}

			.item:nth-child(2n) {
				margin-right: 0;
			}
		}
	}

	.scoll {
		position: relative;
		height: 210rpx;
		height: 285rpx;
		// background-color: #FFFCE1;
		// margin-top: 40rpx;

		.scoll_left {
			width: 100%;
			padding-left: 15rpx;
			height: 250rpx;
			padding-top: 70rpx;

			.choose {
				display: inline-block;
				margin-right: 20rpx;
				width: 150rpx;
				overflow: hidden;
				text-align: center;
				height: 150rpx;

				.sanjiao {
					height: 40rpx;
					margin-top: 8rpx;
					width: 100%;
					text-align: center;
				}


			}

			.sw_chooses {
				border-radius: 10rpx;
				background-image: url('https://oqyf-1305090490.cos.ap-shanghai.myqcloud.com/front/1zhan_ex_borderbgc.png');
				background-size: 100% 100%;
				padding: 5rpx;
				width: 155rpx;
				height: 155rpx;

				image {
					width: 92%;
					height: 90%;
					margin-top: 5%;
				}

			}

			.sw_nochooses {
				border: 10rpx solid #40843F;
				border-radius: 10rpx;

				image {
					width: 100%;
					height: 100%;
					// margin-top: 5%;
				}
			}
		}

		.scoll_right {
			position: absolute;
			right: 0;
			top: 30rpx;
			width: 100rpx;
			height: 200rpx;
			color: #40843F;
			text-align: center;
			font-weight: bold;
			padding-top: 40rpx;

			.text {
				font-size: 38rpx;
			}
		}
	}

	.add {
		height: 100%;
		background-color: #F2F2F2;
		border-radius: 55rpx;
		padding-top: 200rpx;
		width: 750rpx;

		.title {
			position: relative;
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;

			.close {
				position: absolute;
				right: 50rpx;
				top: 0;
			}
		}

		.text_right {
			width: 100%;
			height: 50rpx;
			line-height: 50rpx;
			text-align: right;
			padding-right: 60rpx;
			margin-top: 30rpx;
			color: #0375EE;
		}

		.ress {
			width: 94%;
			margin: 10rpx auto 0;
			background-color: #fff;
			border-radius: 15rpx;

			.ress_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;
				padding: 30rpx;
				width: 100%;
				// border-top: 1rpx solid #eee;

				.icon {
					width: 80rpx;
					height: 80rpx;
					background-color: #ffdfcf;
					border-radius: 40rpx;
					text-align: center;
					line-height: 80rpx;
					color: #d5564d;
				}

				.infors {
					width: 83%;

					.top {
						display: flex;
						align-items: center;
					}

					.name {
						max-width: 230rpx;
						font-size: 34rpx;
						font-weight: bold;
						margin-right: 15rpx;
					}

					.phone {
						color: #bcbcbc;
					}

					.bot {
						width: 100%;
						margin-top: 10rpx;
						display: flex;
						justify-content: space-between;
					}

					.moren {
						margin-left: 10rpx;
						font-size: 20rpx;
						padding: 5rpx;
						text-align: center;
						border-radius: 10rpx;
						color: #F66055;
						border: 1px solid #F66055;
					}
				}
			}
		}

		.btn {
			width: 90%;
			margin: 20rpx auto 0;
			border-radius: 50rpx;
			overflow: hidden;
		}
	}

	.goumai1 {
		height: 480rpx;
	}

	.goumai2 {
		height: 380rpx;
	}

	.goumai {
		padding-top: 30rpx;

		.title {
			position: relative;
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;

			.close {
				position: absolute;
				right: 50rpx;
				top: 0;
			}
		}

		.text_right {
			width: 100%;
			height: 50rpx;
			line-height: 50rpx;
			text-align: right;
			padding-right: 60rpx;
			margin-top: 30rpx;
			color: #0375EE;
		}

		.text {
			padding: 30rpx;
			font-size: 30rpx;
		}

		.btn {
			width: 90%;
			margin: 20rpx auto 0;
			border-radius: 50rpx;
			overflow: hidden;
		}

	}
</style>